<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border:1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }
        th,td{
            padding: 8px 16px;
            border:1px solid #e9e9e9;
            text-align: left;
        }
        th{
            background-color: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
        }
    </style>
</head>
<body>

<div id="app">
    <div v-if="books.length">
        <table>
            <thead>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
            </thead>
            <tbody>
            <tr v-for="(item,index) in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>{{item.price | showPrice}}</td>
                <td>
                    <button @click="increment(index)">+</button>
                    {{item.count}}
                    <button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
                </td>
                <td><button @click="remove(index)">移除</button></td>
            </tr>
            </tbody>
        </table>
        <h2>{{totalPrice | showPrice}}</h2>
    </div>
    <div v-else>
        <h2>暂无数据</h2>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message:'你好',
          books:[{
              id:1,name:'算法导论',date:'2006-9',price:85.00,count:1
          },{
              id:2,name:'《UNIX编程艺术》',date:'2006-2',price:59.00,count:1
          },{
              id:3,name:'《编程珠玑》',date:'2006-10',price:39.00,count:1
          }]
      },
      methods:{
          increment(index){
              return this.books[index].count++
          },
          decrement(index){
              return this.books[index].count--
          },
          remove(index){
              this.books.splice(index,1)
          }
      },
      // 值
      computed:{
          totalPrice(){
              // 遍历获取值
              let totalPrice = 0
              for (let book of this.books) {
                  totalPrice += book.price*book.count
              }
              return totalPrice
          }
      },
      // 过滤器
      filters: {
          showPrice(price){
              return price.toFixed(2)
          }
      }
  })
</script>
</body>
</html>